<template>
  <div style="border: solid 20px rgb(245, 247, 249)">
    <div span="24" style="margin-bottom: 20px">
      <Row>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              订单号
            </div>
            <Input clearable v-model="_id1" placeholder="订单号" />
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              退款状态:
            </div>
            <Select v-model="model">
              <Option value="beijing">退款</Option>
              <Option value="shanghai">未退款</Option>
            </Select>
          </div>
        </Col>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              部门:
            </div>
            <Select>
              <Option value="beijing">总公司</Option>
              <Option value="shanghai">分公司</Option>
            </Select>
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              创建时间--截止时间
            </div>
            <DatePicker
              v-model="searchTime"
              type="daterange"
              split-panels
              placeholder="选择时间"
              style="width: 400px"
            ></DatePicker></div
        ></Col>
        <Col span="8">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              white-space: nowrap;
              margin: 20px;
            "
          >
            <div
              style="
                width: 50%;
                text-align: right;
                margin: auto;
                padding-right: 10px;
              "
            >
              手机号码:
            </div>
            <Input v-model="tel" placeholder="手机号码" />
          </div>
          <div style="text-align: center; margin: 20px">
            <Button
              type="primary"
              style="margin-right: 10px"
              icon="ios-search"
              @click="cx"
              >查询</Button
            >
            <Button
              style="margin-left: 10px"
              icon="ivu-icon ivu-icon-md-refresh"
              @click="cz"
              >重置</Button
            >
          </div></Col
        >
      </Row>
    </div>
    <Table border :columns="columns" :data="watchList">
      <template #name="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template #address="{ row }">
        <strong>{{ row.address.address }}({{ row.address.mobile }})</strong>
      </template>
      <template #paid_time="{ row }">
        <strong>{{ row.goods_list[0].goods_desc }}</strong>
      </template>
      <template #is_refund="{ row }">
        <Switch v-model="row.is_refund" />
      </template>
      <template #pay_type="{ row }">
        <strong>{{ (row.pay_type = "qb" ? "钱包支付" : "其他") }}</strong>
      </template>
      <template #total_fee="{ row }">
        <strong>{{ (row.total_fee / 100).toFixed(2) }}</strong>
      </template>
      <template #status="{ row }">
        <Button v-if="row.status == 1">待付款</Button>
        <Button type="primary" v-if="row.status == 2">已付款</Button>
        <Button type="error" v-if="row.status == 3">退款审核中</Button>
        <Button type="error" v-if="row.status == 4">退款中</Button>
        <Button type="error" v-if="row.status == 5">已退款</Button>
        <Button type="error" v-if="row.status == -1">已取消付款/退款</Button>
        <Button type="error" v-if="row.status == -2">退款拒绝</Button>
        <Button type="error" v-if="row.status == -3">拒绝失败</Button>
      </template>
      <template #wait_status="{ row, index }">
        <Button type="warn" disabled v-if="row.wait_status == 1">待付款</Button>
        <Button
          type="error"
          v-if="row.wait_status == 2"
          @click="showSendModel(row._id, index)"
          >待发货</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 3"
          >待收货</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 4"
          >待评价</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 5"
          >完成</Button
        >
      </template>
      <template #action="{ index }">
        <Button type="error" size="small" @click="remove(index)"
          >删除订单</Button
        >
      </template>
    </Table>
  </div>
  <Modal
      v-model="sendModel"
      title="物流单号"
      :loading="loading"
      @on-ok="sureSendNo"
    >
      <Input placeholder="请输入物流单号" v-model="sendno"></Input>
    </Modal>
</template>
  <script>
import { list, del, search, send } from "../../Api/order.js";
export default {
  created() {
    list().then((res) => {
      this.watchList = res.data.data;
      console.log(this.watchList);
      this.zz();
      for (let i = 0; i < this.watchList.length; i++) {
        this.watchList[i].url = this.watchList[i].goods_list[i].goods_thumb;
      }
    });
  },
  data() {
    return {
      columns: [
        {
          title: "单号",
          key: "_id",
          width: 100,
        },
        {
          title: "物流",
          key: "wait_status",
          width: 100,
          slot: "wait_status",
        },
        {
          title: "订单图",
          key: "url",
          width: 180,
          render: (h, params) => {
            return h("img", {
              src: params.row.url,
              style: {
                width: "140px",
                height: "150px",
              },
            });
          },
        },
        {
          title: "金额",
          width: 100,
          key: "total_fee",
          slot: "total_fee",
        },
        {
          title: "描述",
          width: 200,
          key: "paid_time",
          slot: "paid_time",
        },
        {
          title: "订单创建时间",
          key: "create_time",
          width: 80,
        },
        {
          title: "地址信息",
          key: "",
          slot: "address",
          width: 150,
        },
        {
          title: "完成支付时间",
          key: "paid_time",
          width: 80,
        },
        {
          title: "支付方式",
          key: "pay_type",
          width: 100,
          slot: "pay_type",
        },
        {
          title: "付款",
          key: "is_refund",
          width: 100,
          slot: "status",
        },

        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      watchList: [],
      tel: "",
      _id1: "",
      model: "",
      sendModel: false,
      loading: true,
      id:"",
      sendno:"",
    };
  },
  methods: {
    showSendModel(id,index){
      this.id = id
      this.sendModel = true
      this.watchList[index].wait_status = 3;
    },
    sureSendNo(){
      console.log(this.id);
        send(this.id,this.sendno).then(res=>{
          console.log(res);
          if(res.data.errCode == 0){
            this.loading = false
            this.sendModel = false;
            this.$Notice.success({title:"已经发货"})
          }else{
            this.$Notice.error({title:"设置物流单号失败"})
          }
        })
    },
    cx() {
      search(this._id1, this.tel, this.searchtime).then((res) => {
        console.log(res);
      });
      console.log(this.searchtime);
    },
    cz() {
      this.tel = "";
      this._id1 = "";
      this.model = "";
    },
    remove(index) {
      this.watchList.splice(index, 1);
    },
    zz(strDate) {
      console.log(this.watchList);
      for (let i = 0; i < this.watchList.length; i++) {
        var date = new Date(this.watchList[i].paid_time);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        var m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var strDate = Y + M + D + h + m + s;
        // console.log("输出内容:", strDate);
        this.watchList[i].paid_time = strDate;
      }
      for (let i = 0; i < this.watchList.length; i++) {
        var date = new Date(this.watchList[i].create_time);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        var m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var strDate = Y + M + D + h + m + s;
        // console.log("输出内容:", strDate);
        this.watchList[i].create_time = strDate;
      }
    },
  },
};
</script>